<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsc-input-date</title>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="module" src="../src/js/form.js"></script>
    <script type="module" src="../src/js/loopFor.js"></script>
    <script type="module" src="../src/js/loopItem.js"></script>
    <script type="module" src="../src/js/displayTextarea.js"></script>
</head>

<body>
    <jsc-display-textarea jscbind='name' ></jsc-display-textarea>
    <div style="display: flex;align-items: center;">
        <div>
            <label>测试一</label>
        </div>
        <div style='height: 60px; width: 80%;'>
            <jsc-display-textarea jscbind='skills.0.text'></jsc-display-textarea>
        </div>
    </div>
    <jsc-form class="form">
        <jsc-display-textarea value='hello world'></jsc-display-textarea>
        <jsc-loop-for jscbind='skills'>
            <jsc-loop-item>
                <!-- <label>Power</label> -->
                <div style="border: 1px solid red;">
                    <div style="display: flex;align-items: center;">
                        <div style="margin-right: 10px;">
                            <label>测试一</label>
                        </div>
                        <div style='height: 60px; width: 80%;'>
                            <jsc-display-textarea jscbind='text'></jsc-display-textarea>
                        </div>
                    </div>
                </div>
            </jsc-loop-item>
        </jsc-loop-for>
    </jsc-form>
</body>
<script defer="true" type="text/javascript">
    let person = { 'age': 13, 'isAdmin': true, name: 'Lora', birthday: '2022/02/02', skills: [{ name: 'shoot', text: '开始测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一' }, { name: 'jump', text: 64 }] };

    document.addEventListener('DOMContentLoaded', function (e) {
        let form = document.querySelector('jsc-form');
        form.bind = person;
    });
</script>

</html>